<!DOCTYPE html>
<html lang="en">
	<head>
        <title>火堆</title>     
        <meta name="layout" content="main_pc">  
        <link rel="stylesheet" href="${resource(dir: 'css_pc', file: 'project.css')}" type="text/css">
        <script type="text/javascript" src="${resource(dir: 'js', file: 'jquery-1.10.2.js')}"></script>
        <script type="text/javascript" src="${resource(dir: 'js', file: 'ajaxfileupload.js')}"></script>
    </head>
<body>


	<section class="u-container">
        <div class="uc-left">
           <div class="nav-list">
                <div class="head">
                    <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>项目
                </div>
                <ul>
                    <li><a href="/scfire/project/projectSystemInfo">系统通知</a></li>
                    <li class="active"><a href="/scfire/user/userCenterDetail">管理项目</a></li>
                    <li><a href="/scfire/project/create">发起项目</a></li>
                </ul>
            </div>
            <div class="nav-list">
                <div class="head">
                    <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>设置
                </div>
                <ul>
                    <li><a href="/scfire/user/userAuth">实名认证</a></li>
                </ul>
            </div>
        </div>
        <div class="uc-right">
            <div class="mngt-container">
                <div class="title">管理项目</div>
                <ul class="nav-bar">
                    <li class="active">我发起的</li>
                    <li>我捐赠的</li>
                </ul>
                <div class="content">
                    <ul>
                        <li class="active">
                            <table>
                                <thead>
                                    <tr>
                                        <th>项目名称</th>
                                        <th>捐募时间</th>
                                        <th>筹款情况</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                	<g:each in="${projects}" var="project">
                                    <tr>
                                        <td>${project.name}</td>
                                        <td>
                                            <g:formatDate format="MM-dd HH:mm" date="${project.startDate}"/> ~ <g:formatDate format="MM-dd HH:mm" date="${project.endDate}"/>
                                        </td>
                                        <td>${String.format("%.2f", project.amount)}</td>
                                        <td>
                                           	<g:if test="${project.verified == 'wait'}">
                                           	待审核
                                           	</g:if>
                                           	<g:elseif test="${project.verified == 'draft'}">
                                           	草稿
                                           	</g:elseif>
                                           	<g:elseif test="${project.verified == 'modify'}">
                                           	被退回
                                           	</g:elseif>
                                           	<g:elseif test="${project.verified == 'refuse'}">
                                           	审核失败
                                           	</g:elseif>
                                           	<g:elseif test="${project.verified == 'pass'}">
                                           	审核通过
                                           	</g:elseif>
                                           	<g:elseif test="${project.verified == 'doing'}">
                                          	 执行中
                                           	</g:elseif>
                                           	<g:elseif test="${project.verified == 'over'}">
                                          	 结束
                                           	</g:elseif>
                                           	<g:else>
                                           	</g:else>
                                        </td>
                                        <td>
                                        	<g:if test="${project.verified == 'wait'}">
                                           	</g:if>
                                           	<g:elseif test="${project.verified == 'draft'||project.verified=='modify'}">
                                           	<a class="op" href="/scfire/project/edit?projectid=${project.id}">编辑</a>
                                           	<a class="op" href>二维码</a>
                                           	</g:elseif>
                                           	<g:elseif test="${project.verified == 'refuse'}">
                                           	</g:elseif>
                                           	<g:elseif test="${project.verified == 'pass'}">
                                           	<a class="op" href="/scfire/project/edit?projectid=${project.id}">编辑</a>
                                           	<a class="op" href="#onProgress" data-toggle="modal" onclick="initFeedBack('${project.id}','${project.name}')">提交进展</a>
                                            <a class="op" href>二维码</a>
                                           	</g:elseif>
                                           	<g:else>
                                           	</g:else>
                                        </td>

                                    </tr>
                                    </g:each>
                                </tbody>
                            </table>
                        </li>
                        <div class="modal fade h lg" id="onProgress" tabindex="-1" role="dialog" aria-labelledby="onProgressLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="myModalLabel">新增项目进展</h4>
                                    </div>
                                    <div class="modal-body">
                                        <g:form id="feedBackForm" url="[resource:projectFeedbackInstance, controller:'project', action:'projectFeedbackSave']" method="post" class="form-style2">
                                            <div class="form-item">
                                                <label for="">我的项目</label>
                                                <div class="form-ctrl" id="projectTitle"></div>
                                                <input type="hidden" name="project" id="projectId" value="">
                                            </div>
                                            <div class="form-item">
                                                <label for="">项目进展</label>
                                                <div class="form-ctrl">
                                                    <textarea id="feedBackcontext" data-count="300" name="text"></textarea>
                                                    <span class="count">300</span>
                                                </div>
                                            </div>
                                            <div class="form-item">
                                                <label for="">执行图片</label>
                                                <div class="form-tips fix">支持jpg、jpeg、png格式 ，单张图片大小不超过5M，最多上传9张图片</div>
                                                <div class="form-ctrl">

                                                    <div class="form-imgs" data-index="1" data-max-length="8">
                                                        <div class="img-box">
                                                            <b class="close"></b>
                                                            <input type="file" name="img1" id="img1">
                        									<input type="hidden" name="img1">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-item">
                                                <div class="btn-container">
                                                    <button type="submit" class="btn o btn-submit" >提交项目进展</button>
                                                </div>
                                            </div>
                                        </g:form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <li>
                            <table class="style1">
                                <thead>
                                    <tr>
                                        <th>项目名称</th>
                                        <th>捐募时间</th>
                                        <th>筹款情况(元</th>
                                        <th>状态</th>
                                        <th>我的捐款(元)</th>
                                        <th>捐款码</th>
                                    </tr>
                                </thead>
                                <tbody>
                                	<g:each in="${donates}" var="donate">
                                    <tr>
                                        <td>${donate.project}</td>
                                        <td>
                                            <g:formatDate format="MM-dd HH:mm" date="${donate.project}"/> ~ <g:formatDate format="MM-dd HH:mm" date="${donate.project}"/>
                                        </td>
                                        <td>
                                            <div class="num-finish">已筹<g:formatNumber number="${donate.project}" type="number" maxFractionDigits="2" /></div>
                                            <div class="num-not">还差 <g:formatNumber number="${donate.project}" type="number" maxFractionDigits="2" /></div>
                                        </td>
                                        <td>
                                            <g:if test="${donate.project == 'wait'}">
                                           	待审核
                                           	</g:if>
                                           	<g:elseif test="${donate.project == 'draft'}">
                                           	草稿
                                           	</g:elseif>
                                           	<g:elseif test="${donate.project== 'refuse'}">
                                           	审核失败
                                           	</g:elseif>
                                           	<g:elseif test="${donate.project== 'pass'}">
                                           	审核通过
                                           	</g:elseif>
                                           	<g:else>
                                           	</g:else>
                                        </td>
                                        <td>
                                            <div class="my-num">捐赠 <g:formatNumber number="${donate.money}" type="number" maxFractionDigits="2" /></div>
                                            <div class="my-date"><g:formatDate format="MM-dd HH:mm" date="${donate.date}"/> </div>
                                        </td>
                                        <td>
                                            <a class="op" href="#qrcode" data-toggle="modal">二维码 </a>
                                        </td>
                                    </tr>
                                    </g:each>
                                </tbody>
                            </table>
                            <div class="modal fade h" id="qrcode" tabindex="-1" role="dialog" aria-labelledby="onProgressLabel">
                                <div class="modal-dialog modal-sm" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="myModalLabel">项目二维码 </h4>
                                        </div>
                                        <div class="modal-body">
                                            <div class="qrcode-wrap">
                                                <p class="hd">邀请您成为火堆的一员</p>
                                                <img src="${resource(dir:'img_pc',file:'qrcode.jpg')}">
                                                <p class="ft"><a href>右键</a>另存二维码图片</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    


	<script type="text/javascript">
	$(function() {
		
        $('.mngt-container .nav-bar li').click(function() {
            $(this).addClass('active').siblings().removeClass('active').parent().siblings('.content').find('li').removeClass('active').eq($(this).index()).addClass('active');
        });
        $('.form-imgs').on('click', '.img-box .close', function() {
            $(this).parents('.img-box').remove();
        })
        $('.form-imgs').on('change', '.img-box:last-child input[type=file]', function() {
            // 前台本地测试代码模拟返回操作，后台删除
            var files = [$('.form-imgs .img-box:last-child input[type=file]').attr('id')]
     			$.ajaxFileUpload({  
        			url:'/scfire/project/imgSaveMb',  
        			secureuri:false,  
        			dataType:'text',
        			fileElementId:files,//file标签的id 
        			success: function (data, status) { 
		           	if(data=='large'){
		           		showWarn('图片过大')
		           		return
		           	}
		       		if(data=='format'){
		           		showWarn('图片格式不对')
		           		return
		           	}
	               //把图片替换  
	               if(data=='fail'){
	               	showWarn('上传失败')
	               }else{
	            	   //图片预览
	                   var imageurl = "/scfire/project/imgRead?img="+data;
	                   addNewImgPreview(imageurl, data);
	                   //图文内容传给后台
	                   var imgs = $('.form-imgs');
	                   var index = parseInt(imgs.attr('data-index'));
	                   index++;                   
	                   var html = "<div class='img-box'><b class='close'></b><input type='file' name='img" + (index) + "' id='img" + (index) + "'><input type='hidden' name='img" + (index) + "'/></div></div>";
	                   imgs.attr('data-index', index).append(html);		                            
	               }
		           },  
		           error: function (data, status, e) {  
		        	   alert('上传失败');
		           }
		       	 });
            //addPhotoPreview($(this).parents('.form-imgs'), 'file:///D:/git/crowdfundingmoney/crowdfundingmoney/web-app/images_mobile/demo/demo-jieshao-2.jpg');
        });
        var bind_name = 'input';
        if (navigator.userAgent.indexOf("MSIE") != -1) {
            bind_name = 'propertychange';
        }
        $('[data-count]').bind(bind_name, count);
    });

	function addNewImgPreview (url, data) {
        var imgs = $('.form-imgs');
        imgs.find('.img-box:last-child').css('background-image', 'url(' + url + ')').find('input[type=hidden]').val(data);       
    }
    
    function addPhotoPreview (imgs, url) {
        var max = parseInt(imgs.attr('data-max-length'));
        if (max < imgs.find('.img-box').length) {
            imgs.find('.img-box').eq(max - 1).css('background-image', 'url(' + url + ')').find('input[type=hidden]').val(url);
        } else {
            imgs.find('.img-box:last-child').css('background-image', 'url(' + url + ')').find('input[type=hidden]').val(url);
            var index = parseInt(imgs.attr('data-index'));
            index++;
            var html = '<div class="img-box"><b class="close"></b><input type="file" name="img' +(index)+ '" id="img' +(index)+ '"><input type="hidden" name="img' +(index)+ '"></div>';

            imgs.attr('data-index', index).append(html);
        }
    }
    function count() {
        n = $(this).data('count');
        if($(this).val().length > n) return;
        $(this).siblings('.count').text( n - $(this).val().length );
    }

    function initFeedBack(projectId, projectName){
    	cleanForm();
        $("#projectTitle").html(projectName);
        $("#projectId").val(projectId);
    }

    function cleanForm(){
    	$("#feedBackcontext").val('');
    	$(".form-imgs").html('<div class="img-box">\
			               <b class="close"></b>\
			               <input type="file" name="img1" id="img1">\
						<input type="hidden" name="img1">\
           				 </div>');
    	$(".form-imgs").attr('data-index' ,1);
    }
	</script>

</body>
</html>